import React, { useState, useEffect } from 'react'
import Header from '../../components/header/Header'
import './cate.css'

import { reqgetcate, reqgetgoods } from '../../request/api'

export default function Cate(props) {
    const [list, getcatelist] = useState([]);
    const [categoods, getcategoods] = useState([]);
    const [n, getn] = useState(1);

    useEffect(() => {
        reqgetcate().then(res => {
            getcatelist(res.data.list)
        })

        reqgetgoods({ fid: n }).then(res => {

            getcategoods(res.data.list)
        })
    }, [n])
    console.log(categoods);
    // console.log(n);
    return (
        <div className='Cate'>
            <Header title='商品分类'></Header>
            <div className="cate-top">
                <div className='box'>
                    <input type="text" placeholder='按内容搜索' />
                    <i className='iconfont icon-sousuo'></i>
                    <button>搜索</button>
                </div>
            </div>
            <div className='main'>
                <div className="left">
                    <ul>
                        {
                            list.map((item, index) => (
                                <li key={item.id} onClick={() => getn(item.id)} className={index + 1 === n ? 'select' : ''}>
                                    {item.catename}
                                </li>
                            ))
                        }
                    </ul>
                </div>
                <div className='right'>
                    {
                        categoods.map(item => (
                            <div className='conlist' key={item.id} onClick={() => props.history.push('/detail?id=' + item.id)}>
                                <img src={item.img} alt="pic" />
                                <div className='wenzi'>
                                    <p> <i>限时 </i> {item.goodsname}</p>
                                    <div className='bottom'>
                                        <div className='fl'>
                                            <span>&yen; {item.price}</span>
                                            <span>&yen; {item.market_price}</span>
                                            <button>加入购物车</button>
                                        </div>
                                        <div className='fl'>
                                            <p>{item.description}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
